<template>
	<view>
		<uni-section title="选择文件" type="line">
			<uni-row class="w100">
				<uni-col class='mtp15'>
					<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
						@progress="progress" @success="success" @fail="fail" title="选择图片">
					</uni-file-picker>
				</uni-col>
				<uni-col class='mtp15'>
					<uni-file-picker v-model="imageValue" fileMediatype="video" mode="grid" @select="select"
						@progress="progress" @success="success" @fail="fail" title="选择视频">
						<button>选择video</button>
					</uni-file-picker>
				</uni-col>

				<uni-col class='mtp15'>
					<button @click="handleUploadClick">上传</button>
					<xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload>
					<image :src="tempurl" mode=""></image>
				</uni-col>
			</uni-row>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tempurl:"",
				title: 'Hello Uni App',
				imageValue: [],
				uploadOptions: {
					// url: 'http://192.168.31.185:3000/api/upload', // 不传入上传地址则返回本地链接
				}
			}
		},
		onLoad() {

		},
		methods: {
			handleUploadClick() {
				// 使用默认配置则不需要传入第二个参数
				// type: ['image', 'video', 'file'];
				this.$refs.XeUpload.upload('file', {});
				// this.$refs.XeUpload.upload('image', {
				//  count: 6,
				//  sizeType: ['original', 'compressed'],
				//  sourceType: ['album'],
				// });
			},
			handleUploadCallback(e) {
				// #ifdef APP-PLUS
				plus.nativeUI.alert(JSON.stringify(e), function() {
					console.log("User pressed!");
				}, "nativeUI", "OK");
				// #endif
				console.log('handleUploadCallback', JSON.stringify(e))
				this.tempurl=e.data[0].tempFilePath
				uni.uploadFile({
							url: 'http://192.168.3.165:9109/enterprise/v1.0/upload_avatar', //仅为示例，非真实的接口地址
							filePath: this.tempurl,
							name: 'file',
							formData: {
								token: 'A886AB579429617F70D0D2E501F0CE0FF1FCDFD6F9048F9DA2878815DDD342DC'
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							}
						});
				// e.type: ['choose', 'success', 'warning']
				// choose 是options没有传入url，返回临时链接时触发
				// success 是上传成功返回对应的数据时触发
				// warning 上传或者选择文件失败触发
				// ......
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}
		}
	}
</script>

<style scoped lang="scss">
	.mtp15 {
		margin-top: 15rpx;
	}

	.w100 {
		width: 100%;
	}

	.center {
		text-align: center;
		display: flex;
		justify-content: center;
	}
</style>